<template>
	<view class="top-bar" :style="{height:height+'rpx'}" ref="topBar">
		<view class="left">
			<image src="@/static/images/icon/vector.png" mode="aspectFit" class="back" @click="back" v-if="haveBack">
			</image>
			<view class="back-index" v-if="haveBackIndex" @click="backIndex">
				<image src="@/static/images/icon/tabbar/frame.png" mode="aspectFit"></image>
				<text>回到首页</text>
			</view>
			<text class="title-left" v-if="direction == 'left'">{{title}}</text>
		</view>
		<text class="title" v-if="direction == 'middle'" @touchstart="handleTouchStart"
			@touchend="handleTouchEnd">{{title}}</text>
		<view class="right">

		</view>
	</view>
</template>

<script>
	export default {
		name: "top-bar",
		props: {
			title: {
				type: String,
				default: ''
			},
			height: {
				type: Number,
				default: 80
			},
			haveBack: {
				type: Boolean,
				default: false
			},
			haveBackIndex: {
				type: Boolean,
				default: false
			},
			direction: {
				type: String,
				default: 'middle'
			},
			ownBack: {
				type: Boolean,
				default: false
			},
			dbClik: {
				type: Function,
				default: () => {
					false
				}
			},
		},
		data() {
			return {
				lastTapTime: 0, // 上一次点击的时间戳
				tapTimeout: null, // 用于清除双击判断的定时器
			};
		},
		methods: {
			back() {
				if (this.ownBack) {
					this.$emit('back')
				} else {
					uni.navigateBack()
				}

			},
			backIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			handleTouchStart(event) {
				// 记录当前点击的时间戳
				const currentTime = new Date().getTime();

				// 清除之前的定时器（如果存在）
				if (this.tapTimeout) {
					clearTimeout(this.tapTimeout);
					this.tapTimeout = null;
				}

				// 判断双击（双击的时间间隔可以根据需求调整）
				if (currentTime - this.lastTapTime < 300) {
					this.handleDoubleClick(event);
				} else {
					// 如果不是双击，则记录当前点击时间，并设置定时器用于判断单击
					this.lastTapTime = currentTime;
					this.tapTimeout = setTimeout(() => {
						this.handleSingleClick(event);
						this.lastTapTime = 0; // 重置时间戳
					}, 300);
				}
			},
			handleTouchEnd(event) {
				// 这里可以处理触摸结束的逻辑，如果需要的话
			},
			handleDoubleClick(event) {
				// 你可以在这里添加双击事件的处理逻辑
				this.$emit('dbClick')
			},
			handleSingleClick(event) {
				// 你可以在这里添加单击事件的处理逻辑
			}
		},
		mounted() {
			uni.setStorageSync('topbarHeight', this.height)
		}
	}
</script>

<style lang="scss">
	.top-bar {
		height: 50rpx;
		font-size: $uni-font-size-topbar;
		background: #fff;
		display: flex;
		justify-content: space-between;

		.title,
		.left,
		.right {
			flex: 1;
			position: relative;
		}

		.title,
		.title-left {
			color: #3D3D3D;
			font-size: $uni-font-size-topbar;
			line-height: 80rpx;
			text-align: center;
			font-weight: 700;
		}

		.title-left {
			margin-left: 75rpx;
		}

		.back {
			height: 100%;
			width: 75rpx;
			transform: translate(-50%, -50%) rotate(180deg);
			padding: 27rpx 25rpx;
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 26rpx;
		}

		.back-index {
			height: 56rpx;
			border-radius: 50rpx;
			background: #c5c5c5;
			float: left;
			margin-left: 25rpx;

			image {
				height: 35rpx;
				width: 35rpx;
				float: left;
				overflow: hidden;
				margin: 10rpx 12rpx 0 25rpx;
			}

			text {
				margin-right: 25rpx;
				font-size: 23rpx;
			}
		}
	}
</style>